import FilterToolBar from "@/components/filter-tool-bar";
import TableData from "./components/TableData";
import { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { addTab } from '@/store/modules/tabListSlice';
import api from '@/api'
import { useDispatch } from "react-redux";
import { message } from "antd";

const btnGroup = [
  [
    { text: '新建', type: 'primary', action: 'handleAdd' },
  ],
  []
]

const DataSet = () => {
  const navigate = useNavigate()
  const dispatch = useDispatch()
  const [tableData, setTableData] = useState([])

  const initData = () => {
    const params = { id: 0 }
    api.dataset.getChildrenById(params).then(res => {
      setTableData(res.data)
    })
  }

  const toEdit = (row) => {
    const path = {
      path: '/system/dataset/edit' + (row ? '?id=' + row.id : ''),
      title: `${row ? '编辑' : '新建'}数据集ID` + (row ? row.id : ''),
      readonly: false
    }
    dispatch(addTab(path))
    navigate('/system/dataset/edit' + (row ? '?id=' + row.id : ''))
  }

  const handleDel = row => {
    api.dataset.delete(row).then(res => {
      message.success('删除成功')
      initData()
    })
  }

  useEffect(() => {
    initData()
  }, [])

  return (
    <div>
      <FilterToolBar 
        btnGroup={btnGroup}
        handleAdd={toEdit}
      ></FilterToolBar>
      <TableData
        data={tableData} 
        handleDel={handleDel} 
        handleEdit={(row) => toEdit(row)}
      ></TableData>
    </div>
  )
}

export default DataSet
